Component, Routes, এবং Controllers এর জন্য টেস্ট কেস তৈরি

Ember.js-এ টেস্টিং অ্যাপ্লিকেশনটির কোডের বাগ চিহ্নিত করতে এবং তার কার্যকারিতা নিশ্চিত করতে গুরুত্বপূর্ণ একটি অংশ। Ember CLI আসার পর, QUnit এবং Mocha টেস্টিং ফ্রেমওয়ার্কগুলির মাধ্যমে অ্যাপ্লিকেশনটির ইউনিট টেস্ট এবং ইনটিগ্রেশন টেস্ট লিখা সহজ হয়ে গেছে। এই টিউটোরিয়ালে, আমরা Ember.js অ্যাপ্লিকেশনের জন্য Components, Routes, এবং Controllers এর জন্য টেস্ট কেস তৈরি করা নিয়ে আলোচনা করব।

Ember.js-এ testing helpers এবং QUnit মডিউল ব্যবহার করে সহজেই ইউনিট টেস্ট এবং ইনটিগ্রেশন টেস্ট লেখা সম্ভব।

Ember.js এ টেস্টিংয়ের মৌলিক ধারণা

• Unit Tests: নির্দিষ্ট মডিউল বা ফাংশনের জন্য লজিক পরীক্ষা করা হয়।
• Integration Tests: বিভিন্ন কম্পোনেন্ট বা মডিউলের মধ্যকার ইন্টারঅ্যাকশন পরীক্ষা করা হয়।
• Acceptance Tests: অ্যাপ্লিকেশনের সম্পূর্ণ কাজের অভিজ্ঞতা পরীক্ষিত হয়।

Ember CLI-এ ember test কমান্ডটি ব্যবহার করে সব ধরনের টেস্ট চালানো যায়।

1. Components এর জন্য টেস্ট কেস তৈরি

Ember.js কম্পোনেন্টগুলি UI উপাদান হিসেবে কাজ করে। এগুলির কার্যকারিতা এবং প্রদর্শন সঠিকভাবে কাজ করছে কিনা তা পরীক্ষা করার জন্য টেস্ট তৈরি করা হয়।

উদাহরণ: app/components/user-profile.js

// app/components/user-profile.js
import Component from '@glimmer/component';

export default class UserProfileComponent extends Component {
  get fullName() {
    return `${this.args.firstName} ${this.args.lastName}`;
  }
}

টেস্ট কেস তৈরি

ember generate component-test user-profile

এটি tests/integration/components/user-profile-test.js ফাইল তৈরি করবে।

// tests/integration/components/user-profile-test.js
import { module, test } from 'qunit';
import { render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
import { setupRenderingTest } from 'ember-qunit';

module('Integration | Component | user-profile', function (hooks) {
  setupRenderingTest(hooks);

  test('it renders full name correctly', async function (assert) {
    this.set('firstName', 'John');
    this.set('lastName', 'Doe');

    await render(hbs`<UserProfile @firstName={{this.firstName}} @lastName={{this.lastName}} />`);

    assert.dom(this.element).hasText('John Doe');
  });
});

এখানে, আমরা firstName এবং lastName ইনপুট দিয়ে UserProfile কম্পোনেন্টের fullName ফাংশন পরীক্ষা করেছি। টেস্টে render() ব্যবহার করে কম্পোনেন্ট রেন্ডার করা হয় এবং assert.dom() দিয়ে অ্যাপ্লিকেশনের টেক্সট পরীক্ষা করা হয়।

2. Routes এর জন্য টেস্ট কেস তৈরি

Routes এ সাধারণত মডেল ডেটা লোডিং এবং রাউট ট্রানজিশন পরিচালনা করা হয়। আমরা রাউটের ডেটা এবং স্টেট চেক করার জন্য টেস্ট তৈরি করতে পারি।

উদাহরণ: app/routes/user.js

// app/routes/user.js
import Route from '@ember/routing/route';

export default class UserRoute extends Route {
  model(params) {
    return fetch(`/api/users/${params.user_id}`)
      .then(response => response.json());
  }
}

টেস্ট কেস তৈরি

ember generate route-test user

এটি tests/unit/routes/user-test.js ফাইল তৈরি করবে।

// tests/unit/routes/user-test.js
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Route | user', function (hooks) {
  setupTest(hooks);

  test('it exists', function (assert) {
    let route = this.owner.lookup('route:user');
    assert.ok(route);
  });

  test('it fetches user data correctly', async function (assert) {
    let route = this.owner.lookup('route:user');
    let model = await route.model({ user_id: 1 });
    assert.ok(model);
    assert.equal(model.name, 'John Doe');
  });
});

এখানে, setupTest() ব্যবহার করে আমরা রাউটটি ইনস্ট্যান্সিয়েট করে পরীক্ষা করছি। route.model() ফাংশন ব্যবহার করে API থেকে ডেটা ফেচ করা হয়েছে এবং টেস্টে সেই ডেটার প্রপার্টি যাচাই করা হয়েছে।

3. Controllers এর জন্য টেস্ট কেস তৈরি

Controllers হল Ember.js অ্যাপ্লিকেশনের ভিউ-লজিক। টেস্টিংয়ে আমরা কন্ট্রোলারের প্রপার্টি এবং অ্যাকশনগুলির কার্যকারিতা পরীক্ষা করতে পারি।

উদাহরণ: app/controllers/user.js

// app/controllers/user.js
import Controller from '@ember/controller';

export default class UserController extends Controller {
  get fullName() {
    return `${this.model.firstName} ${this.model.lastName}`;
  }
}

টেস্ট কেস তৈরি

ember generate controller-test user

এটি tests/unit/controllers/user-test.js ফাইল তৈরি করবে।

// tests/unit/controllers/user-test.js
import { module, test } from 'qunit';
import { setupTest } from 'ember-qunit';

module('Unit | Controller | user', function (hooks) {
  setupTest(hooks);

  test('it exists', function (assert) {
    let controller = this.owner.lookup('controller:user');
    assert.ok(controller);
  });

  test('it computes full name correctly', function (assert) {
    let controller = this.owner.lookup('controller:user');
    controller.set('model', { firstName: 'John', lastName: 'Doe' });
    assert.equal(controller.fullName, 'John Doe');
  });
});

এখানে, কন্ট্রোলারের fullName গেটার ফাংশন পরীক্ষা করা হয়েছে। আমরা কন্ট্রোলারের মডেল প্রপার্টি সেট করেছি এবং তার পর ফাংশনের আউটপুট যাচাই করেছি।

টেস্টিং প্রক্রিয়ায় কিছু গুরুত্বপূর্ণ পরামর্শ

1. Helper Methods: অনেক সময় একই লজিক বার বার ব্যবহার হয়, তাই টেস্টে হেল্পার মেথড তৈরি করতে পারেন যা টেস্ট সহজ করবে।
2. Mocking API Calls: যদি আপনার অ্যাপ্লিকেশন API কল করে, তবে আপনি ember-cli-mirage বা sinon.js ব্যবহার করে API কল মক করতে পারেন।
3. Test Coverage: সম্পূর্ণ অ্যাপ্লিকেশন বা ফিচারের জন্য টেস্ট কাভারেজ নিশ্চিত করা খুবই গুরুত্বপূর্ণ।

উপসংহার

Ember.js অ্যাপ্লিকেশনে Component, Routes, এবং Controllers এর জন্য টেস্ট কেস তৈরি করা খুবই গুরুত্বপূর্ণ, কারণ এটি নিশ্চিত করে যে আপনার অ্যাপ্লিকেশন সঠিকভাবে কাজ করছে এবং বাগ মুক্ত। QUnit এবং Ember Testing Helpers ব্যবহার করে আপনি সহজেই Ember.js অ্যাপ্লিকেশনের ইউনিট, ইনটিগ্রেশন, এবং অ্যাকসেপ্টেন্স টেস্ট তৈরি করতে পারবেন।